<template>
  <div>
    <h3 style="margin-bottom: 10px; overflow: hidden">
      审版意见
      <a-button
        size="small"
        type="primary"
        style="float: right"
        @click="toDetail"
        v-if="!isdisabled && hasAddBtn"
        >新增评审</a-button
      >
    </h3>
    <div v-if="splrList.length">
      <div class="item mb20" v-for="item in splrList" :key="item.id">
        <div class="des-top">
          <span class="dpb mr20">评审编号：{{ item.splReviewCode }}</span>
          <a-button
            v-if="item.reviewResult === 1"
            size="small"
            style="
              color: #35bc2c;
              border-color: #35bc2c;
              background-color: #f4ffeb !important;
            "
          >
            {{ item.reviewResultStr }}
          </a-button>
          <a-button
            v-if="item.reviewResult === 2"
            size="small"
            danger
            style="background-color: #ffeeed !important"
            >{{ item.reviewResultStr }}</a-button
          >
          <span class="ml-40px" v-if="item.reviewResult === 2"
            >不合格原因：{{ item.reasonStr }}</span
          >
          <div class="fr">
            <a-button
              type="link"
              size="small"
              @click="toClaim(item)"
              v-if="+item.state === 0"
              >认领</a-button
            >
            <a-button
              type="link"
              size="small"
              @click="exportData(item)"
              :loading="item.isloading"
              >导出</a-button
            >
            <a-button
              type="link"
              size="small"
              @click="toDetail(item)"
              v-if="+item.state !== 0"
              >编辑</a-button
            >
          </div>
        </div>
        <a-descriptions
          class="mb10"
          size="small"
          title=""
          bordered
          :column="{ xxl: 4, xl: 4, lg: 4, md: 4 }"
        >
          <a-descriptions-item label="CP">{{ item.cp }}</a-descriptions-item>
          <a-descriptions-item label="SKC">{{ item.skc }}</a-descriptions-item>
          <a-descriptions-item label="外发打样编号">{{
            item.proofingCode
          }}</a-descriptions-item>
          <a-descriptions-item label="供应商">{{
            +systemType === 1 && item.hideSupplierFlag === 1
              ? ''
              : item.supplierName
          }}</a-descriptions-item>

          <a-descriptions-item label="评审类型">{{
            item.productTypeStr
          }}</a-descriptions-item>
          <a-descriptions-item label="评审状态">{{
            item.stateStr
          }}</a-descriptions-item>
          <a-descriptions-item label="评审日期">{{
            item.resultTime
          }}</a-descriptions-item>
          <a-descriptions-item label="审版人">{{
            item.reviewerName
          }}</a-descriptions-item>
          <!-- <a-descriptions-item label="创建日期">{{
            item.gmtCreate
          }}</a-descriptions-item> -->
          <a-descriptions-item label="结论">{{
            item.conclusion
          }}</a-descriptions-item>
        </a-descriptions>
        <p-table
          v-if="item.comments"
          :pagination="false"
          :columns="sewingColumns"
          :row-key="(r, i) => r.id || i"
          :data-source="item.comments"
          :hasPaginate="false"
        >
          <template #content="{ record }">
            <pre
              style="white-space: normal"
              v-if="record.content && record.content.indexOf('\n') !== -1"
              >{{ record.content }}</pre
            >
            <div v-else>{{ record.content }}</div>
          </template>
          <template #img="{ record }">
            <oss-upload
              disabled
              :showUpload="false"
              list-type="picture-card"
              v-model:files="record.ossList"
            />
          </template>
          <template #creator="{ record }">
            <div>
              {{
                record.modifierName ? record.modifierName : record.creatorName
              }}
            </div>
          </template>
          <template #createTime="{ record }">
            <div>
              {{ record.gmtModified ? record.gmtModified : record.gmtCreate }}
            </div>
          </template>
        </p-table>
      </div>
    </div>
    <div class="tac" v-if="splDatas.length > 1">
      <a-button
        style="margin: 10px auto"
        type="link"
        @click="showMore = !showMore"
        >{{ showMore ? '展开更多' : '收起更多' }}
        <DownOutlined v-if="showMore" />
        <UpOutlined v-else />
      </a-button>
    </div>
    <a-drawer
      v-if="isAdd"
      v-model:visible="isAdd"
      title="评审明细"
      class="small"
      width="95%"
      placement="right"
      @close="closeAdd"
    >
      <SplReviewDetail
        :id="splId"
        :isprocess="true"
        :CP="cp"
        @close="closeAdd"
        @commit="commitSplpreview"
      />
    </a-drawer>
  </div>
</template>
<script>
import { reactive, toRefs, computed, watch } from 'vue'
import SplReviewDetail from '../../views/SplReview/components/SplReviewDetail.vue'
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue'
import {
  splReview_query_detail_get,
  splReview_export_get,
  splReview_claim_get
} from 'server/modules/4725'
import { message } from 'ant-design-vue'
import { getQueryString } from 'cupshe-utils'
export default {
  name: 'qhw',
  components: {
    SplReviewDetail,
    DownOutlined,
    UpOutlined
  },
  props: {
    cp: null,
    hasAddBtn: {
      type: Boolean,
      default: true
    },
    isdisabled: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const state = reactive({
      systemType: getQueryString('systemType') || null,
      isAdd: false,
      showMore: false,
      // splrList: [],
      splDatas: [],
      splId: null,
      sewingColumns: [
        {
          title: '审版意见',
          key: 'content',
          width: '370px',
          slots: { customRender: 'content' }
        },
        {
          title: '图片',
          width: '370px',
          key: 'ossList',
          slots: { customRender: 'img' }
        },
        {
          title: '填写人',
          width: '140px',
          key: 'modifierName',
          slots: { customRender: 'creator' }
        },
        {
          title: '填写时间',
          width: '140px',
          key: 'gmtModified',
          slots: { customRender: 'createTime' }
        }
      ]
    })
    const closeAdd = () => {
      state.isAdd = false
    }
    //认领
    const toClaim = async val => {
      const res = await splReview_claim_get({ id: val.id })
      if (res.success) {
        message.success(res.retInfo)
        getSplDetail()
      } else {
        message.error(res.retInfo)
      }
    }
    const toDetail = val => {
      state.isAdd = true
      state.splId = val ? val.id : ''
      // handlerParentWin('closeDrawer')
    }
    const commitSplpreview = () => {
      getSplDetail()
    }
    const splrList = computed(() => {
      let arr = []
      if (state.showMore) {
        if (state.splDatas && state.splDatas.length) {
          arr = [state.splDatas[0]]
        }
      } else {
        arr = [...state.splDatas]
      }
      return arr
    })
    // 查询样衣评审明细
    const getSplDetail = async () => {
      const res = await splReview_query_detail_get({ cp: props.cp })
      if (res.success) {
        state.splDatas = res.data ? res.data : []
        state.showMore = true
        state.splDatas.forEach(item => {
          item.isloading = false
        })
        // if (!state.splDatas.length) return
        // state.splrList = [state.splDatas[0]]
      } else {
        message.error(res.retInfo)
      }
    }
    // 导出样衣评审明细
    const exportData = async record => {
      record.isloading = true
      const res = await splReview_export_get({ id: record.id })
      record.isloading = false
      if (res.success) {
        if (!res.data) return message.error('导出失败')
        let a = document.createElement('a')
        a.href = res.data
        a.click()
        a = null
      } else {
        message.error(res.retInfo)
      }
    }

    // watch(
    //   () => state.showMore,
    //   val => {
    //     console.log(val, 'showmore')
    //     if (val) {
    //       state.splrList = [props.splDatas[0]]
    //     } else {
    //       state.splrList = [...props.splDatas]
    //     }
    //   },
    //   {
    //     immediate: true
    //   }
    // )
    watch(
      () => props.cp,
      val => {
        val && getSplDetail()
      },
      {
        immediate: true
      }
    )
    return {
      splrList,
      ...toRefs(state),
      closeAdd,
      toDetail,
      commitSplpreview,
      getSplDetail,
      exportData,
      toClaim
    }
  }
}
</script>
<style lang="scss" scoped>
.des-top {
  border: 1px solid #f0f0f0;
  border-bottom: none;
  padding: 8px 16px;
  background: #fafafa;
}
</style>
